<template>
    <div class="emoji-wrap">
        <div class="item-box" v-for="(item, index) in emojiList" :key="index">{{ item.char }}</div>
    </div>
</template>

<script lang="ts" setup>
import emojiList from '@/utils/emoji'
</script>

<style scoped lang="scss">
.emoji-wrap {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0 10px 9px;
    .item-box {
        font-size: 32px;
        // border: 1px solid #f4f4f4;
        border-left: 1px solid #f4f4f4;
        border-bottom: 1px solid #f4f4f4;
        padding: 5px ;
        &:nth-child(7n) {
            border-right: 1px solid #f4f4f4;
        }
    }
}
</style>